import { message } from 'ant-design-vue'
const longpress = {
  bind: function (el, binding, vNode) {
    const { value: { func, time = 2000 }, value } = binding
    if (typeof func !== 'function') {
      message.error('指令回调必须是一个函数')
    }
    // 定义变量
    let pressTimer = null
    // 创建计时器（ 2秒后执行函数 ）
    let start = (e) => {
      if (e.type === 'click' && e.button !== 0) {
        return
      }
      if (pressTimer === null) {
        pressTimer = setTimeout(() => {
          handler()
        }, time)
      }
    }
    // 取消计时器
    let cancel = (e) => {
      if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }
    // 运行函数
    const handler = (e) => {
      let args = []
      for (const key in value) {
        if (value.hasOwnProperty(key)) {
          if (key === 'func' || key === 'time') continue // 跳过函数和时间，把后面数据传输给回调函数
          args.push(value[key])
        }
      }
      func(...args)
    }
    // 添加事件监听器
    el.addEventListener('mousedown', start)
    el.addEventListener('touchstart', start)
    // 取消计时器
    el.addEventListener('click', cancel)
    el.addEventListener('mouseout', cancel)
    el.addEventListener('touchend', cancel)
    el.addEventListener('touchcancel', cancel)
  },
  // 当传进来的值更新的时候触发
  componentUpdated (el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind (el) {
    el.removeEventListener('click', el.handler)
  }
}

export default longpress
